/* src/styles/Overlay.css */

.dashboard-overlay-container {
  /* This div exists within the #dashboard-root portal element. */
}

/* --- Theme Variables --- */
/* Default (Dark Theme) */
:root,
.theme-dark {
    --sidebar-bg: #282c34;
    --sidebar-text: #abb2bf;
    --sidebar-header-color: #61dafb;
    --sidebar-border: #3a3f47;
    --sidebar-shadow: rgba(0, 0, 0, 0.5);
    --section-bg: #3a3f47;
    --item-border: #5a606b;
    --input-bg: #454b54;
    --input-text: #abb2bf;
    --input-border: #5a606b;
    --button-bg: #61dafb;
    --button-text: #282c34;
    --button-hover-bg: #a4d9f5;
    --pre-bg: #3a3f47;
    --pre-text: #abb2bf;

    /* Tooltip variables */
    --tooltip-bg: #5a606b;
    --tooltip-text: #abb2bf;
    --tooltip-border: #7a808b;

    /* Theme Toggle Icon Colors */
    --icon-sun-color: #f39c12;
    --icon-moon-color: #f1c40f;

    /* Slider specific variables */
    --slider-track-color: var(--input-bg);
    --slider-thumb-color: var(--sidebar-header-color);

    /* Notification specific */
    --notification-progress-bg: #5a606b;
    --notification-progress-fill: var(--sidebar-header-color);
    --notification-success-color: #2ecc71; /* Green */
    --notification-error-color: #e74c3c; /* Red */
    --notification-shadow: rgba(0, 0, 0, 0.3);
    --notification-close-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Light Theme */
.theme-light {
    --sidebar-bg: #ffffff;
    --sidebar-text: #333;
    --sidebar-header-color: #0056b3;
    --sidebar-border: #e9e9e9;
    --sidebar-shadow: rgba(0, 0, 0, 0.2);
    --section-bg: #f4f4f4;
    --item-border: #ddd;
    --input-bg: #ffffff;
    --input-text: #333;
    --input-border: #ccc;
    --button-bg: #007bff;
    --button-text: #ffffff;
    --button-hover-bg: #0056b3;
    --pre-bg: #e9e9e9;
    --pre-text: #333;

    /* Tooltip variables */
    --tooltip-bg: #333;
    --tooltip-text: #ffffff;
    --tooltip-border: #555;

     /* Slider specific variables */
    --slider-track-color: var(--item-border);
    --slider-thumb-color: var(--sidebar-header-color);

    /* Notification specific */
    --notification-progress-bg: #e0e0e0;
    --notification-progress-fill: var(--sidebar-header-color);
    --notification-success-color: #27ae60; /* Slightly darker green */
    --notification-error-color: #c0392b; /* Slightly darker red */
    --notification-shadow: rgba(0, 0, 0, 0.15);
    --notification-close-hover-bg: rgba(0, 0, 0, 0.08);
}


/* Styles for the Sidebar */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 100vh;
  background-color: var(--sidebar-bg);
  box-shadow: 2px 0 5px var(--sidebar-shadow);
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out, background-color 0.3s ease, color 0.3s ease;
  z-index: 1010;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
  color: var(--sidebar-text);
  font-family: sans-serif;
  font-size: 14px;
}

/* State when the sidebar is open */
.sidebar.is-open {
  transform: translateX(0);
}

/* Sidebar Header */
.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sidebar-border);
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-action-button {
    background: none;
    border: none;
    padding: 4px;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.header-action-button:hover {
    background-color: rgba(128, 128, 128, 0.2);
}

.header-action-button svg {
    fill: currentColor;
    display: block;
}

.sidebar h2 {
    margin: 0;
    font-size: 1.5em;
    color: var(--sidebar-header-color);
}

.sidebar h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--sidebar-header-color);
}

/* Theme Toggle Button */
.theme-toggle {
    width: 40px;
    height: 20px;
    border-radius: 10px;
    background-color: var(--item-border);
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0 2px;
    box-sizing: border-box;
    overflow: hidden;
}

.sidebar-action-buttons {
    display: flex;
    justify-content: space-around; /* Distribute buttons evenly */
    align-items: center;
    margin-bottom: 20px; /* Space before the next section */
    padding: 10px 0; /* Some vertical padding */
    border-bottom: 1px solid var(--sidebar-border); /* Optional separator */
}

.action-button {
    display: flex; /* Center icon inside */
    align-items: center;
    justify-content: center;
    width: 40px; /* Square-ish */
    height: 40px;
    padding: 0; /* Remove default padding */
    border: 1px solid var(--item-border);
    border-radius: 8px; /* Rounded corners */
    background-color: var(--input-bg); /* Default OFF background (grayish) */
    color: var(--sidebar-text); /* Default icon color */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    outline: none;
}

.action-button svg {
    /* SVG is controlled by parent's color property */
    fill: currentColor;
    width: 60%; /* Adjust icon size within button */
    height: 60%;
    pointer-events: none; /* Prevent SVG from capturing clicks */
}

.action-button:hover {
    border-color: var(--sidebar-header-color); /* Highlight border on hover */
    background-color: var(--section-bg); /* Slightly different background on hover */
}

.action-button.active {
    background-color: var(--sidebar-header-color); /* ON background (blueish) */
    color: var(--button-text); /* Icon color when ON (often contrast like white/black) */
    border-color: var(--sidebar-header-color);
}

/* Ensure active hover is distinct if needed */
.action-button.active:hover {
     background-color: var(--button-hover-bg); /* Use button hover color */
     border-color: var(--button-hover-bg);
}

/* Style for the icons inside the toggle */
.theme-toggle .icon {
    position: absolute;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Initial position for moon (visible in dark mode) */
.theme-toggle .moon-icon {
    left: 2px;
    opacity: 1;
    transform: translateX(0);
    color: var(--icon-moon-color);
}

/* Initial position for sun (hidden in dark mode) */
.theme-toggle .sun-icon {
    left: 2px;
    opacity: 0;
    transform: translateX(100%);
    color: var(--icon-sun-color);
}

/* State when the toggle is in light mode */
.theme-toggle.light .moon-icon {
    opacity: 0;
    transform: translateX(100%);
}

.theme-toggle.light .sun-icon {
    opacity: 1;
    left: auto;
    right: 2px;
    transform: translateX(0);
}


/* Section Styling */
.sidebar-section {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: var(--section-bg);
    border: 1px solid var(--item-border);
}

/* Setting Item Styling */
.dev-setting-item {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: var(--section-bg);
}

/* Styles for labels */
.dev-setting-item label,
.gauge-label {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--sidebar-text);
}


/* Style for the specific Encoder select element */
.dev-setting-item #encoderSelect {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom arrow SVG for dark theme */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23abb2bf%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 12px auto;
    transition: border-color 0.2s ease;
}

/* Custom arrow color and explicit colors for light theme select */
.theme-light .dev-setting-item #encoderSelect {
     /* Custom arrow SVG for light theme */
     background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
     background-color: var(--input-bg);
     color: var(--input-text);
}

/* Hover state for select */
.dev-setting-item #encoderSelect:hover {
    border-color: var(--sidebar-header-color);
}

/* Focus state for select */
.dev-setting-item #encoderSelect:focus {
   outline: none;
   border-color: var(--sidebar-header-color);
   box-shadow: none;
}


/* --- Slider Specific Styles --- */

/* Style for the range input element */
.dev-setting-item input[type="range"] {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 20px;
}

/* Remove focus outline in some browsers */
.dev-setting-item input[type="range"]:focus {
    outline: none;
}

/* Style the slider track (Webkit - Chrome, Safari) */
.dev-setting-item input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Style the slider thumb (Webkit - Chrome, Safari) */
.dev-setting-item input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -4px;
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.1s ease;
}

.dev-setting-item input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 4px rgba(var(--sidebar-header-color), 0.5);
}


/* Style the slider track (Mozilla - Firefox) */
.dev-setting-item input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: var(--slider-track-color);
    border-radius: 4px;
    transition: background 0.3s ease;
}

/* Style the slider thumb (Mozilla - Firefox) */
.dev-setting-item input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--slider-thumb-color);
    border: 1px solid var(--item-border);
    border-radius: 50%;
    transition: background 0.3s ease, box-shadow 0.1s ease;
}

.dev-setting-item input[type="range"]::-moz-range-thumb:hover {
     box-shadow: 0 0 4px rgba(var(--sidebar-header-color), 0.5);
}


/* --- Gauge Specific Styles --- */
/* Container for grouping gauges */
.stats-gauges {
    display: flex;
    justify-content: space-around;
    margin-bottom: 0px;
    flex-wrap: wrap;
    color: var(--sidebar-text);
    padding: 5px 0;
    background-color: var(--section-bg);
}

/* Individual gauge container (SVG + Label) */
.gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 5px 5px;
    min-width: 80px;
    text-align: center;
    cursor: help;
}

/* Style for the SVG text inside the gauge */
.gauge-container svg text {
   fill: var(--sidebar-text);
   pointer-events: none;
}

/* Style for the label below the gauge */
.gauge-label {
    margin-top: 5px;
    font-weight: bold;
    color: var(--sidebar-text);
    text-align: center;
    font-size: 0.9em;
    pointer-events: none;
}


/* --- Tooltip Styles --- */
.gauge-tooltip {
    position: fixed;
    padding: 8px 12px;
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--tooltip-border);
    border-radius: 4px;
    font-size: 0.9em;
    z-index: 1030;
    pointer-events: none;
    white-space: nowrap;
    transform: translate(-50%, -100%);
}

/* Styles for the Toggle Handle */
.toggle-handle {
  position: fixed;
  top: 50%;
  left: 0;
  width: 15px;
  height: 60px;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visual indicator for the toggle handle */
.toggle-indicator {
    width: 5px;
    height: 40px;
    background-color: var(--sidebar-header-color);
    border-radius: 3px;
}

/* Basic body styling to prevent horizontal scrollbar caused by off-screen fixed elements */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
}

/* Apply theme variables to the body as well for general page styles if needed */
#dashboard-root.theme-dark {
}
#dashboard-root.theme-light {
}

/* Ensure the #dashboard-root element created in main.jsx has a high z-index */
#dashboard-root {
    z-index: 1000;
}

.sidebar-section {
    margin-bottom: 10px;
    padding: 0;
    border-radius: 8px;
    background-color: var(--section-bg);
    border: 1px solid var(--item-border);
    overflow: hidden;
}

.sidebar-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    user-select: none; /* Prevent text selection on click */
    transition: background-color 0.2s ease;
}

.sidebar-section-header:hover {
    background-color: rgba(128, 128, 128, 0.1); /* Subtle hover effect */
}

.sidebar-section-header h3 {
    margin: 0; /* Remove default h3 margins */
    font-size: 1.2em;
    color: var(--sidebar-header-color);
}

.section-toggle-icon {
    display: flex; /* Helps align the SVG */
    align-items: center;
    color: var(--sidebar-text); /* Make caret color match text */
    margin-left: 10px; /* Space between title and caret */
}

.sidebar-section-content {
    padding: 15px; /* Add padding to the content area */
    padding-top: 10px; /* Add a bit of space below the header */
}

/* --- Ensure existing styles work with new structure --- */
/* Adjust padding/margin for items inside the content if needed */
.sidebar-section-content .dev-setting-item {
    background-color: transparent; /* Inherit from section */
}

.sidebar-section-content .stats-gauges {
    background-color: transparent; /* Inherit from section */
    padding: 5px 0 0 0;
    margin-bottom: 0;
}

/* Container for the clipboard label and textarea */
.dashboard-clipboard-item {
    margin-bottom: 15px; /* Consistent spacing like other items */
    display: flex;
    flex-direction: column;
    gap: 5px; /* Space between label and textarea */
    background-color: transparent; /* Inherit from section background */
}

/* Label for the clipboard textarea */
.dashboard-clipboard-item label {
    font-weight: bold;
    font-size: 0.9em; /* Match other labels */
    color: var(--sidebar-text);
}

/* The clipboard textarea itself */
.dashboard-clipboard-item textarea {
    width: 100%;
    box-sizing: border-box; /* Include padding and border in width */
    padding: 8px; /* Consistent padding */
    border: 1px solid var(--input-border);
    border-radius: 8px; /* Consistent border radius */
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 0.9em;
    font-family: monospace;
    resize: vertical; /* Allow vertical resizing */
    min-height: 80px; /* Give it a decent minimum height */
    transition: border-color 0.2s ease, background-color 0.2s ease; /* Smooth transitions */
}

/* Hover state for the textarea */
.dashboard-clipboard-item textarea:hover {
    border-color: var(--sidebar-header-color); /* Highlight border on hover */
}

/* Focus state for the textarea */
.dashboard-clipboard-item textarea:focus {
   outline: none; /* Remove default browser outline */
   border-color: var(--sidebar-header-color); /* Highlight border on focus */
}

/* Placeholder text styling (optional, but good for themes) */
.dashboard-clipboard-item textarea::placeholder {
    color: var(--sidebar-text);
    opacity: 0.6; /* Make placeholder less prominent */
}

/* Specific placeholder styles for light theme if needed */
.theme-light .dashboard-clipboard-item textarea::placeholder {
    color: var(--sidebar-text);
    opacity: 0.6;
}

.gamepad-visualizer-instance {
    margin-bottom: 20px; /* Space between multiple gamepads */
    padding-bottom: 15px;
    border-bottom: 1px dashed var(--item-border); /* Separator */
}
.gamepad-visualizer-instance:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* No border for the last one */
}

.gamepad-visualizer-instance h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1em;
    color: var(--sidebar-text);
    font-weight: normal;
}

/* The main SVG container */
.gamepad-svg-vis {
    background-color: var(--input-bg); /* Use input background for contrast */
    border-radius: 5px;
    display: block; /* Prevent extra space below */
    border: 1px solid var(--item-border);
}

/* SVG Element Styles (Copied and adapted from original core script) */
.gp-vis-base {
    fill: #555;
    stroke: #888;
    stroke-width: 0.5;
}
.gp-vis-button,
.gp-vis-dpad,
.gp-vis-bumper {
    fill: #8ecae6;
    stroke: #a1d8f0;
    stroke-width: 0.5;
    transition: fill 0.05s linear;
}
.gp-vis-stick-base {
    fill: #2a527a;
}
.gp-vis-stick-top {
    fill: #6699cc;
    stroke: #8cb3d9;
    stroke-width: 0.5;
    transition: transform 0.05s linear;
}
.gp-vis-trigger {
    fill: #8ecae6;
    stroke: #a1d8f0;
    stroke-width: 0.5;
    transition: opacity 0.05s linear;
    opacity: 0.5; /* Default low opacity for triggers */
}

/* Pressed States */
.gp-vis-button-pressed,
.gp-vis-dpad-pressed,
.gp-vis-bumper-pressed {
    fill: #4a90e2; /* Active/pressed color */
}

/* Message when no gamepads are detected yet */
.no-gamepads-message {
    font-style: italic;
    color: var(--sidebar-text);
    opacity: 0.7;
    text-align: center;
    margin-top: 10px;
}

/* Style for preset and audio device dropdowns */
.dev-setting-item #resolutionPresetSelect,
.dev-setting-item .audio-device-select {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Custom arrow SVG for dark theme */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23abb2bf%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 8px top 50%;
    background-size: 12px auto;
    transition: border-color 0.2s ease;
}

/* Custom arrow color and explicit colors for light theme select */
.theme-light .dev-setting-item #resolutionPresetSelect,
.theme-light .dev-setting-item .audio-device-select {
    /* Custom arrow SVG for light theme */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2C114.7L159.1%2C282.6c-3.2%2C3.2-8.3%2C3.2-11.6%2C0L5.5%2C114.7c-3.2-3.2-3.2-8.3%2C0-11.6l10.3-10.3c3.2-3.2%2C8.3-3.2%2C11.6%2C0l124.9%2C124.9l124.9-124.9c3.2-3.2%2C8.3-3.2%2C11.6%2C0l10.3%2C10.3C290.3%2C106.5%2C290.3%2C111.5%2C287%2C114.7z%22%2F%3E%3C%2Fsvg%3E');
    background-color: var(--input-bg);
    color: var(--input-text);
}

/* Hover state for select */
.dev-setting-item #resolutionPresetSelect:hover,
.dev-setting-item .audio-device-select:hover {
    border-color: var(--sidebar-header-color);
}

/* Focus state for select */
.dev-setting-item #resolutionPresetSelect:focus,
.dev-setting-item .audio-device-select:focus {
   outline: none;
   border-color: var(--sidebar-header-color);
   box-shadow: none;
}

/* Disabled state for audio device selects */
.dev-setting-item .audio-device-select:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Container for manual width/height inputs */
.resolution-manual-inputs {
    display: flex;
    gap: 10px; /* Space between width and height inputs */
    margin-bottom: 15px; /* Space below the inputs */
}

/* Individual manual input item (label + input) */
.manual-input-item {
    flex: 1; /* Each takes half the space */
    margin-bottom: 0; /* Remove bottom margin from individual items */
}

/* Manual width/height number inputs */
.manual-input-item input[type="number"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    box-sizing: border-box;
    -moz-appearance: textfield; /* Firefox */
}

/* Remove spinners for number input in Webkit */
.manual-input-item input[type="number"]::-webkit-outer-spin-button,
.manual-input-item input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hover/Focus for number inputs */
.manual-input-item input[type="number"]:hover {
    border-color: var(--sidebar-header-color);
}
.manual-input-item input[type="number"]:focus {
    outline: none;
    border-color: var(--sidebar-header-color);
}

/* Container for scale locally checkbox and label */
.scale-locally-item {
    display: flex;
    align-items: center;
    gap: 8px; /* Space between checkbox and label */
    margin-bottom: 15px;
}

.scale-locally-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sidebar-header-color); /* Color the checkbox */
    cursor: pointer;
    margin: 0; /* Reset margin */
}

.scale-locally-item label {
    font-weight: normal; /* Make label less prominent than section headers */
    font-size: 0.9em;
    cursor: pointer; /* Allow clicking label to toggle */
    margin: 0; /* Reset margin */
}

/* Container for the resolution action buttons */
.resolution-action-buttons {
    display: flex;
    gap: 10px; /* Space between buttons */
    margin-top: 5px; /* Space above the buttons */
}

/* Styling for Set/Reset buttons */
.resolution-button {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid var(--item-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    font-size: 0.9em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.resolution-button:hover {
    background-color: var(--section-bg);
    border-color: var(--sidebar-header-color);
}

/* Divider style used in Audio Settings */
.section-divider {
    border: none;
    border-top: 1px solid var(--item-border);
    margin: 15px 0;
}

/* Error message style used in Audio Settings */
.error-message {
    color: var(--error-color, #e74c3c);
    background-color: rgba(231, 76, 60, 0.1);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 0.9em;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

/* Notice style used in Audio Settings */
.device-support-notice {
    font-size: 0.8em;
    color: var(--sidebar-text-secondary, #888);
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
}

.toggle-button {
    /* Inherits base styles from .resolution-button */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    border-color: var(--item-border);
}

.toggle-button:hover {
    /* Slightly more prominent hover */
    border-color: var(--sidebar-header-color);
    background-color: var(--section-bg);
}

/* Active state for toggle buttons */
.toggle-button.active {
    background-color: var(--sidebar-header-color); /* Highlight color */
    color: var(--button-text); /* Contrast text color */
    border-color: var(--sidebar-header-color); /* Match background border */
}

/* Hover state when active */
.toggle-button.active:hover {
     background-color: var(--button-hover-bg); /* Use theme's button hover */
     border-color: var(--button-hover-bg);
}

.notification-container {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 320px; /* Adjust width as needed */
    z-index: 1050; /* Ensure it's above other elements like sidebar */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between notifications */
    pointer-events: none; /* Allow clicks to pass through container */
}

.notification-item {
    background-color: var(--section-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--item-border);
    border-radius: 8px;
    padding: 10px 15px;
    box-shadow: 0 2px 10px var(--notification-shadow);
    opacity: 1;
    transition: opacity 0.5s ease-out, transform 0.3s ease-out; /* Match FADE_DURATION */
    transform: translateX(0);
    pointer-events: auto; /* Re-enable pointer events for items */
    overflow: hidden; /* Prevent content overflow */
}

.notification-item.fade-out {
    opacity: 0;
    transform: translateX(20px); /* Optional: slide out effect */
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.notification-filename {
    font-weight: bold;
    font-size: 0.9em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
    margin-right: 10px; /* Space before close button */
}

.notification-close-button {
    background: none;
    border: none;
    color: var(--sidebar-text);
    font-size: 1.2em;
    line-height: 1;
    padding: 2px 5px;
    margin: -2px -5px; /* Make clickable area slightly larger */
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease, background-color 0.2s ease;
    border-radius: 4px;
}

.notification-close-button:hover {
    opacity: 1;
    background-color: var(--notification-close-hover-bg);
}

.notification-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notification-status-text {
    font-size: 0.85em;
    opacity: 0.9;
}

.notification-progress-bar-outer {
    width: 100%;
    height: 6px;
    background-color: var(--notification-progress-bg);
    border-radius: 3px;
    overflow: hidden;
}

.notification-progress-bar-inner {
    height: 100%;
    width: 0%; /* Start at 0% */
    background-color: var(--notification-progress-fill);
    border-radius: 3px;
    transition: width 0.1s linear; /* Smooth progress updates */
}

/* Status-specific styling */
.notification-item.end .notification-progress-bar-inner {
    background-color: var(--notification-success-color);
}

.notification-item.error .notification-progress-bar-inner {
    background-color: var(--notification-error-color);
}

.notification-item.error .notification-status-text.error-text {
    color: var(--notification-error-color);
    font-weight: bold;
}

.notification-error-message {
    font-size: 0.8em;
    color: var(--notification-error-color);
    margin: 5px 0 0 0;
    padding: 0;
    word-break: break-word; /* Wrap long error messages */
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

/* Files Modal Styles */
.files-modal {
    position: fixed;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 15px; /* Rounded corners for the modal */
    box-shadow: 0 5px 15px var(--sidebar-shadow);
    z-index: 1060; /* Above notifications and sidebar */
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.files-modal-close {
    position: absolute;
    top: 10px; /* Position relative to modal padding */
    right: 15px; /* Position relative to modal padding */
    background: transparent;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 1061; /* Ensure close button is above iframe */
}

.files-modal-close:hover {
    color: var(--sidebar-header-color);
}

.files-modal iframe {
    flex-grow: 1; /* Make iframe fill the available space in the modal */
    width: 100%;
    height: 100%; /* Fill the height of the flex container part */
    border: none; /* No border for the iframe */
    border-radius: 10px; /* Slightly rounded corners for the iframe content area */
    background-color: var(--input-bg); /* Background for iframe area before content loads */
}

/* Virtual Keyboard Button */
.virtual-keyboard-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: var(--button-bg); /* Uses theme variable for background */
  color: var(--button-text); /* Uses theme variable for icon color */
  border: 1px solid var(--item-border); /* Uses theme variable for border */
  border-radius: 8px; /* Square with rounded corners, consistent with other elements */
  box-shadow: 0 2px 8px var(--sidebar-shadow); /* Consistent shadow */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1040; /* Positioned above sidebar/tooltips, below modals/notifications */
  padding: 0; /* Remove default padding */
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.virtual-keyboard-button:hover {
  background-color: var(--button-hover-bg); /* Uses theme variable */
  border-color: var(--sidebar-header-color); /* Highlight similar to other interactive elements */
  transform: translateY(-2px); /* Slight lift effect on hover */
}

.virtual-keyboard-button:active {
  transform: translateY(0px) scale(0.98); /* Press down effect */
  /* Optionally, use a slightly different background for active state if desired */
  /* background-color: var(--button-active-bg, var(--button-hover-bg)); */
}

.virtual-keyboard-button svg {
  width: 24px; /* Adjust icon size as needed */
  height: 24px;
  fill: currentColor; /* Icon color inherits from button's text color */
}

.apps-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80vw; /* 80% of viewport width */
    height: 80vh; /* 80% of viewport height */
    max-width: 1000px; /* Optional: max width */
    max-height: 700px; /* Optional: max height */
    background-color: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 5px 20px var(--sidebar-shadow);
    z-index: 1070; /* High z-index */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content from spilling out before scroll is active */
}

.apps-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 2rem;
    font-weight: bold;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 1071;
}

.apps-modal-close:hover {
    color: var(--sidebar-header-color);
}

.apps-modal-content {
    padding: 20px;
    padding-top: 40px; /* Space for close button */
    flex-grow: 1;
    overflow-y: auto; /* Scroll for content */
    display: flex;
    flex-direction: column;
}

.apps-modal-loading,
.apps-modal-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex-grow: 1;
    color: var(--sidebar-text);
}
.apps-modal-loading p {
    margin-top: 10px;
}
.apps-modal-error {
    color: var(--notification-error-color);
}


.apps-search-bar {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1em;
    box-sizing: border-box;
}
.apps-search-bar:focus {
    outline: none;
    border-color: var(--sidebar-header-color);
}

.apps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    align-content: start;
}

.app-card {
    background-color: var(--section-bg);
    border: 1px solid var(--item-border);
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; /* Keeps pushing name to bottom */
    position: relative; /* For badge */
    min-height: 180px;
    max-height: 220px;
    overflow: hidden;
}

.app-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.theme-dark .app-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}


.app-card-icon {
    width: 96px;
    height: 96px;
    object-fit: contain;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.app-card-name {
    font-size: 0.9em;
    color: var(--sidebar-text);
    word-break: break-word;
    margin-top: auto;
    line-height: 1.3;
    max-height: 3.9em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-card-installed-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: var(--notification-success-color);
    color: white; /* Or var(--button-text) if it fits better */
    padding: 2px 6px;
    font-size: 0.7em;
    border-radius: 4px;
    font-weight: bold;
}


/* App Detail View */
.app-detail-view {
    padding: 10px;
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content */
    text-align: center; /* Center text */
}

.app-detail-back-button {
    align-self: flex-start; /* Position to the left */
    margin-bottom: 15px;
    background-color: var(--input-bg);
    color: var(--sidebar-text);
    border: 1px solid var(--item-border);
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
}
.app-detail-back-button:hover {
    background-color: var(--section-bg);
    border-color: var(--sidebar-header-color);
}

.app-detail-icon {
    width: 128px; /* Slightly smaller than GTK's detail view */
    height: 128px;
    object-fit: contain;
    margin-bottom: 15px;
    border-radius: 8px; /* Optional: if icons are square */
}

.app-detail-view h2 {
    color: var(--sidebar-header-color);
    margin-top: 0;
    margin-bottom: 10px;
}

.app-detail-description {
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 20px;
    max-width: 600px; /* Prevent description from becoming too wide */
}

.app-action-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    justify-content: center; /* Center buttons */
}

.app-action-button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 120px; /* Ensure buttons have a decent width */
}

.app-action-button.install {
    background-color: var(--button-bg);
    color: var(--button-text);
}
.app-action-button.install:hover {
    background-color: var(--button-hover-bg);
}

.app-action-button.update {
    background-color: #f0ad4e; /* Example: Orange for update */
    color: white;
}
.app-action-button.update:hover {
    background-color: #eea236;
}

.app-action-button.remove {
    background-color: var(--notification-error-color); /* Example: Red for remove */
    color: white;
}
.app-action-button.remove:hover {
    background-color: #c9302c;
}

/* Spinner Icon color fix if needed */
.apps-modal-loading svg {
    stroke: var(--sidebar-header-color);
}
